<template>
<van-swipe-cell :on-close="onClose">
    <div class="box-container">
        <!-- 左边复选框 -->
        <van-checkbox v-model="$store.state.cars[currentIndex].ischecked" checked-color="red"></van-checkbox>
        <!-- 中间图片 -->
        <img :src="car.imageHost + car.mainImage" alt="">
        <!-- 右边内容 -->
        <div class="box-content">
            <p class="title">{{car.name}}</p>
            <p class="subtitle">{{car.subtitle}}</p>
            <div class="shopcart-stepper">
                <span class="shopcart-price">￥{{car.price}}</span>
                <van-stepper v-model="$store.state.cars[currentIndex].count" />
            </div>
        </div>
    </div>
    <template slot="right">
        <van-button square type="danger" text="删除" />
    </template>
</van-swipe-cell>
</template>

<script>
import {
    Dialog
} from 'vant';
import { delCar } from '@/api'
export default {
    methods: {
        // clickPosition 表示关闭时点击的位置
        onClose(clickPosition, instance) {
            switch (clickPosition) {
                case 'outside':
                    instance.close();
                    break;
                case 'right':
                    Dialog.confirm({
                        message: '确定删除吗？'
                    }).then(() => {
                        // 发送删除数据的请求
                        const params = {
                            id:this.car.id
                        }
                        delCar(params).then(res=>{
                            if(res.status == 0){
                                instance.close()
                                this.$emit('delCar',this.car.id)
                                this.$store.commit('removeCars',this.car.productId)
                            }
                        })
                    });
                    break;
            }
        }
    },
    props:{
        car:{
            type:Object
        },
        currentIndex:{
            type:Number,
            default:0
        }
    }
}
</script>

<style lang="scss" scoped>
.box-container {
    display: flex;
    justify-content: space-between;
    margin: 0 0 20px;
    padding: 10px;
    background-color: #fff;

    .van-checkbox {
        width: 100px;
    }

    img {
        width: 160px;
        height: 160px;
        margin: 0 5px;
    }

    .box-content {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .title {
            height: 70px;
            font-size: 26px;
            overflow: hidden;
        }

        .subtitle {
            height: 70px;
            font-size: 24px;
            color: #999;
            overflow: hidden;
        }

        .shopcart-stepper {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .shopcart-price {
                font-size: 30px;
                color: red;
            }
        }
    }
}

.van-button {
    height: 100%;
}
</style>
